<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Air-Arena Preview</title>
  <link rel="stylesheet" href="/static/style.css">
  <link rel="icon" href="/static/images/android-chrome-192x192.png" type="192x192">
  <link rel="icon" href="/static/images/android-chrome-512x512.png" type="512x512">
  <link rel="icon" href="/static/images/apple-touch-icon.png" type="image/x-icon">
  <link rel="icon" href="/static/images/favicon-16x16.png" type="16x16">
  <link rel="icon" href="/static/images/favicon-32x32.png" type="32x32">
  <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon">
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
  <h1 style="position:relative;">
    Air-Arena Preview
    <button id="toggle-filter-btn" style="position:absolute; right:20px; top:50%; transform:translateY(-50%);">
      🔽 Show Filters
    </button>
  </h1>

  <div id="filter-wrapper">
    <div class="tag-filter" id="tag-filter">
      {% for tag in all_tags %}
        <label>
          <input type="checkbox" value="{{ tag }}" {% if tag in current_tags %}checked{% endif %} onchange="filterVideos()">
          <span>{{ tag }}</span>
        </label>
      {% endfor %}
    </div>
  </div>
  <div style="text-align: center;">
    <button type="submit" class="reset-btn" onclick="resetScene()">Reset Scene</button>
  </div>
  <p style="text-align: center; margin-top: 15px;">List all the videos in {{ videos_folder }}</p>

  <div class="video-list" id="video-list">
    {% for video_info in video_infos %}
      <div class="video-item" data-tags="{{ video_info.tags | join(',') }}">
        <video controls>
          <source src="{{ url_for('video', filename=video_info.name) }}" type="video/mp4">
          Your browser does not support the video tag.
        </video>
        <p>{{ video_info.name }}</p>
        <p>
        <strong>Tags:</strong>
        {% for tag in video_info.tags %}
            <button 
            type="button"
            class="tag-btn {% if tag in ['success','failed','timeout','collision'] %}{{ tag }}{% endif %}"
            onclick="addTagFilter('{{ tag }}')">
            {{ tag }}
            </button>
        {% endfor %}
        </p>
        <div class="button-container">
          <a class="download-btn" href="{{ url_for('video', filename=video_info.name) }}" download>Download</a>
          <form action="{{ url_for('delete_video', filename=video_info.name) }}" method="post">
            <button type="submit" class="delete-btn">Delete</button>
          </form>
          <button type="button" class="bag-btn" onclick="getBag('{{ video_info.name }}')">Get Bag</button>
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="pagination">
    {% if current_page > 1 %}
      <a href="{{ url_for('index', page=1, tags=origin_tags) }}">First</a>
      <a href="{{ url_for('index', page=current_page - 1, tags=origin_tags) }}">Previous</a>
    {% endif %}
    <span>
  Page 
  <input id="page-input" type="number" min="1" max="{{ total_pages }}" value="{{ current_page }}" style="width:60px; text-align:center; padding:4px; border-radius:6px; border:1px solid #ccc;">
  of {{ total_pages }}
  </span>
  <button id="go-page-btn" style="padding:4px 10px; margin-left:6px; border:none; border-radius:6px; background:#007bff; color:#fff; cursor:pointer;">
    Go
  </button>
    {% if current_page < total_pages %}
      <a href="{{ url_for('index', page=current_page + 1, tags=origin_tags) }}">Next</a>
      <a href="{{ url_for('index', page=total_pages , tags=origin_tags )}}">Last</a>
    {% endif %}
  </div>
  <script>
    window.totalPages = {{ total_pages }};
  </script>
  <script src="/static/script.js">
  </script>
</body>
</html>
